<script lang="ts" setup>
import API from '@/services';
import { onMounted, reactive, ref } from 'vue';
const props = defineProps({
  indexPrecessObj: {
    type: Object
  }
});
const metricsDetail = reactive({
  data: {} as any
});
let getMetricsData = reactive<any>({});
const metricsMessage = async () => {
  try {
    const { code, data } = await API.metrics.getMetricsById({
      id: props.indexPrecessObj?.id
    });
    if (code === 200) {
      let repeatMetrics = {};
      getMetricsData = data;
      Object.keys(getMetricsData).forEach((item: any) => {
        repeatMetrics[item] = getMetricsData[item] || '--';
      });
      metricsDetail.data = repeatMetrics;
      //派生指标修饰词处理
      if (metricsDetail.data.metricsType == 2) {
        let modifierIds = metricsDetail.data.modifierIdsSort.split(';');
        let modifierNames = modifierIds
          .map((item: any) => {
            let modifier = metricsDetail.data.modifiers.find(
              (obj: any) => obj.id == item
            );
            if (modifier) {
              return modifier.cnName;
            }
          })
          .filter((item: any) => item != undefined);
        metricsDetail.data.modifierName = modifierNames.join('、');
      }
    }
  } catch (error) {}
};
onMounted(() => {
  metricsMessage();
});
</script>

<template>
  <div class="mtb-18">
    <span class="fw">指标版本：</span>
    <span>{{ metricsDetail.data.versionNo }}</span>
  </div>
  <div class="mt-18 dis-flex">
    <span class="col_606">业务含义：</span>
    <span>
      {{ metricsDetail.data.businessMeaning }}
    </span>
  </div>
  <div class="dis-flex space-between message-form">
    <div class="form-list">
      <ul>
        <li class="bg_index">
          <div>
            <span class="col_606">指标英文名：</span>
            <span class="col_333">{{ metricsDetail.data.enName }}</span>
          </div>
          <div class="mt-18" v-if="metricsDetail.data.metricsType == 2">
            <span class="col_606">原子指标：</span>
            <span class="col_333">{{
              metricsDetail.data.dependMetrics.cnName
            }}</span>
          </div>
          <div class="mt-18">
            <span class="col_606">统计粒度：</span>
            <span class="col_333">{{ metricsDetail.data.timePeriodStr }}</span>
          </div>
        </li>
        <li>
          <span class="col_606">数据类型：</span>
          <span class="col_333">{{ metricsDetail.data.dataType }}</span>
        </li>
        <li>
          <span class="col_606">指标等级：</span>
          <span class="col_333">{{ metricsDetail.data.grade }}</span>
        </li>
        <li>
          <span class="col_606">需求时间：</span>
          <span class="col_333">{{ metricsDetail.data.createTime }}</span>
        </li>
        <li>
          <span class="col_606">指标创建时间：</span>
          <span class="col_333">{{ metricsDetail.data.createTime }}</span>
        </li>
      </ul>
    </div>
    <div class="form-list">
      <ul>
        <li class="bg_alias">
          <div>
            <span class="col_606">指标别名：</span>
            <span v-if="metricsDetail.data?.alias" class="col_333">{{
              metricsDetail.data.alias
            }}</span>
            <span v-else class="col_333">--</span>
          </div>
          <div class="mt-18" v-if="metricsDetail.data.metricsType == 2">
            <span class="col_606">修饰词：</span>
            <span class="col_333">{{ metricsDetail.data.modifierName }}</span>
          </div>
          <div class="mt-18">
            <span class="col_606">默认聚合方式：</span>
            <span class="col_333">{{ metricsDetail.data.aggregation }}</span>
          </div>
        </li>
        <li>
          <span class="col_606">技术口径：</span>
          <span v-if="metricsDetail.data?.caliber" class="col_333">{{
            metricsDetail.data.caliber
          }}</span>
          <span v-else class="col_333">--</span>
        </li>
        <li>
          <span class="col_606">计量单位：</span>
          <span v-if="metricsDetail.data?.unit" class="col_333">{{
            metricsDetail.data.unit
          }}</span>
          <span v-else class="col_333">--</span>
        </li>
        <li>
          <span class="col_606">需求提出人：</span>
          <span class="col_333">{{ metricsDetail.data.sourceMaker }}</span>
        </li>
        <li>
          <span class="col_606">指标创建人：</span>
          <span class="col_333">{{ metricsDetail.data.createBy }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
li {
  list-style: none;
}
.message-form {
  ul {
    padding: 0;
    li {
      margin-top: 18px;
    }
  }
}
.form-list {
  width: 49%;
}
</style>